TypeScript Advanced Types: Освоение шаблонных литеральных и условных типов

Международный пример: Обработка различных форматов дат

В разных регионах мира используются разные форматы дат. Вы можете использовать условные типы для обработки этих различий.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Реализация будет обрабатывать различные форматы дат)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Неверный формат даты");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Тип: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Тип: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Тип: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Получение доступа к году, зная, что он там будет

Этот пример использует условные типы для определения различных функций парсинга дат на основе указанного формата даты. Тип ParseDate гарантирует, что возвращаемый объект имеет правильные свойства в зависимости от формата.

Сочетание шаблонных литеральных и условных типов

Настоящая мощь раскрывается при сочетании шаблонных литеральных и условных типов. Это позволяет выполнять невероятно мощные манипуляции с типами.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName 
  ? { type: T; payload: any }  // Упрощено для демонстрации
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


// Пример функции, принимающей тип
function processEvent(event: T): ExtractEventPayload {
    // В реальной реализации мы бы фактически отправляли событие.
    console.log(`Processing event ${event}`);

    // В реальной реализации payload зависел бы от типа события.
    return { type: event, payload: {} } as ExtractEventPayload;
}

// Обратите внимание, что типы возвращаемых значений очень специфичны:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

// Если вы используете другие строки, вы получаете `never`:
// const someOtherEvent = processEvent("someOtherEvent"); // Тип: `never`

Лучшие практики и рекомендации

• Сохраняйте простоту: Хотя эти продвинутые типы мощны, они могут быстро стать сложными. Стремитесь к ясности и поддерживаемости.
• Тщательно тестируйте: Убедитесь, что ваши определения типов работают так, как ожидается, написав исчерпывающие модульные тесты.
• Документируйте свой код: Четко документируйте назначение и поведение ваших продвинутых типов, чтобы улучшить читаемость кода.
• Учитывайте производительность: Чрезмерное использование продвинутых типов может повлиять на время компиляции. Профилируйте свой код и оптимизируйте при необходимости.